<template>
  <div>
    <!-- 基于传过来的数据 data 进行 v-for 的渲染 -->
    <div v-for="(item, index) in data" :key="item.label">

      <!-- 目前我们封装的组件写死了，固定只能渲染span，可以通过插槽动态配置 -->
      <slot :label="item.label" :index="index" :treeData="data">
        <span>{{ item.label }} - {{ index }}</span>
      </slot>

      <!-- 有孩子的时候, 才继续往下渲染 -->
      <div v-if="item.children && item.children.length > 0" class="children-item">
        <!-- 有孩子，那么就用hm-tree把孩子们渲染出来 -->
        <hm-tree :data="item.children">
          <!-- 目前在配置二、三级节点的内容 -->
          <template #default="obj">
            <!-- slot递归传递, 将obj中拿到的所有属性全都绑给slot  -->
            <!-- 将第一层父组件中传递结构拿到，作为二层的插槽内容传递，v-bind 是传递数据 -->

            <slot name="default" v-bind="obj" />
            <!-- <slot :label="obj.label" :index="obj.index" :treeData="obj.treeData" /> -->
          </template>
        </hm-tree>
      </div>
    </div>

  </div>
</template>

<script>
// 默认 具名
// 作用域插槽：给插槽绑定数据，将来使用组件时，可以通过 = 接收这些数据

/**
 * <jack>
 *   <template #default="{ money, age }">
 *      <div>{{ age }}</div>
 *      <div>{{ money }}</div>
 *   </template>
 *
 *   <template #main="{ car, mobile }">
 *      <div>{{ car }}</div>
 *      <div>{{ mobile }}</div>
 *   </template>
 * </jack>
 *
 * jack.vue
 *   <slot :age="age" :money="money"></slot>
 *   <slot name="main" :car="car" :mobile="mobile"></slot>
 */

/*
  function fn () {
    console.log('我是内容')
    fn()
  }
  test4=> 调用hm-tree => fn()
*/
export default {
  // 自己调用自己，必须加name
  name: 'HmTree',
  props: {
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<style>
.children-item {
  padding-left: 20px;
}
</style>
